<script lang="ts" setup>
import { ref } from 'vue'
import { getSelectListApi } from '@/apis/article'
import type { SelectItem } from '@/types/article'

// 获取属性值
interface PropsSelect {
    width?: number,
    modelValue: number | null | undefined
}
const props = withDefaults(defineProps<PropsSelect>(), {
    width: 200
})

// 获取频道列表
const selectList = ref<SelectItem[]>([])
const getSelectList = async () => {
    const res = await getSelectListApi()
    selectList.value = res.data.data.channels
}
getSelectList()

// 回传数据
const emits = defineEmits(['update:modelValue'])
const val = ref<number | null>(null)
const changeSelect = (value: number | null) => {
    let newValue = value
    if (value === 0) {
        newValue = value
    } else if (value) {
        newValue = value
    } else {
        newValue = null
    }
    emits('update:modelValue', newValue)
    val.value = newValue
}
</script>

<template>
    <!-- 频道 -->
    <el-select v-model="val" :value="modelValue" clearable placeholder="请选择"
        :style="`width: ${props.width}px; height: 40px`" @change="changeSelect">
        <el-option v-for="item in selectList" :key="item.id" :label="item.name" :value="item.id" />
    </el-select>
</template>

<style lang="less" scoped>
:deep(.el-tooltip__trigger) {
    height: 40px;
}
</style>